<template>
    <div class="header">
        <el-row class="wrapper">
            <el-col :span="5">
                <div style="float:right">
                    <svg class="logo" viewBox="0 0 128 128" width="24" height="24" data-v-97393f76="">
                        <path fill="#42b883" d="M78.8,10L64,35.4L49.2,10H0l64,110l64-110C128,10,78.8,10,78.8,10z"
                            data-v-97393f76="">
                        </path>
                        <path fill="#35495e" d="M78.8,10L64,35.4L49.2,10H25.6L64,76l38.4-66H78.8z" data-v-97393f76="">
                        </path>
                    </svg>
                </div>
            </el-col>
            <el-col :span="9">
                <el-menu :default-active="this.$route.path" class="el-menu-demo" mode="horizontal" router
                    @select="handleSelect">
                    <el-menu-item v-for="(item, i) in navList" :key="i" :index="item.path">
                        <el-icon>
                            <component :is="item.icon" />
                        </el-icon>
                        <span> {{ item.navItem }}</span>
                    </el-menu-item>
                </el-menu>
            </el-col>
            <el-col :span="4">
                <div style="width: 95%;">
                    <el-select style="width: 100%;" v-model="value" class="w-50 m-2" placeholder="请输入歌名、歌词、歌手或专辑"
                        size="large" filterable>
                        <div class="hot-search">
                            <h5>热门搜索</h5>
                            <el-option v-for="(item, index) in serachHot" :key="index" :label="item.first"
                                :value="item.first">
                                <span :class="[ index < 3 ? 'top-' + index : '']">{{(index + 1) + '.'}}</span>
                                {{item.first}}
                            </el-option>
                        </div>

                    </el-select>
                </div>
            </el-col>
            <el-col :span="6">
                <div v-if="isLogin">
                    <el-image style="width: 40px; height: 40px; margin-right: 10px; border-radius: 50%;"
                        :src="userInfo.avatarUrl" class="avatar">
                    </el-image>
                    <el-dropdown @command="clickcommand" trigger="click" style="margin-top: 10px;">
                        <span class="el-dropdown-link">
                            {{userInfo.nickname}}
                            <el-icon class="el-icon--right">
                                <arrow-down />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item command="my">我的主页</el-dropdown-item>
                                <el-dropdown-item command="logout">退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
                <div v-else>
                    <Login></Login>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { ref } from 'vue'
import { ElNotification, ElMessage } from 'element-plus';
import { serachHot, logout } from '@apis/http';
import { useStore } from 'vuex'
import Login from '@components/Login.vue';

export default {
    components: {
        Login,
    },
    data() {
        return {
            navList: [
                { path: "/index", navItem: "首页", icon: "HomeFilled" },
                { path: "/rank", navItem: "排行榜", icon: "Histogram" },
                { path: "/playlist", navItem: "歌单", icon: "List" },
                { path: "/mvlist", navItem: "MV", icon: "VideoCameraFilled" },
                { path: "/singer", navItem: "歌手", icon: "UserFilled" },
                { path: "/my", navItem: "我的音乐", icon: "Menu" },
            ],
            isLogin: '',
            serachHot: [],
            userInfo: [],
            loginForm: {
                phone: "",
                pwd: ""
            },
            rules: {
                phone: [
                    { required: true, message: "请输入手机号", trigger: "blur" }
                ],
                pwd: [
                    { required: true, message: "请输入密码", trigger: "blur" }
                ]
            }
        };
    },
    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
            console.log("路由=" + JSON.stringify(this.$route.path));
        },
        activeIndex() {

        },
        clickcommand(name) {
            if (name === "logout") {
                logout().then(res => {
                    if (res.code === 200) {
                        localStorage.removeItem('token');
                        localStorage.removeItem('cookie');
                        localStorage.removeItem('userInfo');
                        localStorage.removeItem('isLogin');

                        ElMessage({
                            message: '退出成功',
                            type: 'success',
                        })
                    } else {
                        ElNotification({
                            type: 'error',
                            title: '提示',
                            message: '接口请求错误，请查看logout()接口',
                        })
                    }
                });
            }
        },

    },
    created: function () {
        if (localStorage.getItem("isLogin") !== null) {
            this.isLogin = localStorage.getItem("isLogin");
        }

        if (localStorage.getItem("userInfo")) {
            this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
        }
        console.log(localStorage.getItem("isLogin"));

        serachHot().then(res => {
            // console.log(JSON.stringify(res));
            if (res.code === 200) {
                this.serachHot = res.result.hots;
            }
            else {
                ElNotification({
                    type: "error",
                    title: "提示",
                    message: "接口请求错误，请查看serachHot()接口",
                });
            }
        });
    }
}
</script>

<style>
.el-select-dropdown__wrap {
    max-height: 400px;
}
</style>

<style lang="less" scoped>
.el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
}

.hot-search {
    h5 {
        padding: 5px 0 5px 20px;
        font-size: 18px;
    }

    .top-0 {
        font-weight: bold;
        color: rgba(255, 0, 0, 1);
    }

    .top-1 {
        font-weight: bold;
        color: rgba(255, 0, 0, .6);
    }

    .top-2 {
        font-weight: bold;
        color: rgba(255, 0, 0, .4);
    }
}

.logo {
    display: inline-block;
    height: 60px;
    line-height: 60px;
    padding: 10px 0;
}

img {
    display: inline-block;
    width: auto;
    height: 16px;
    padding: 6px 0;
    vertical-align: top;
}

.header {
    position: fixed;
    width: 100%;
    z-index: 5;
    font-size: 0;
    box-shadow: 0 2px 10px 0 rgba(52, 52, 52, .1);
    background: #fff;
}

.wrapper {
    display: flex;
    align-items: center;
}

.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.index {
    float: right;
    width: 55%;
}

.el-card__body,
.el-main {
    padding: 0px;
}

.el-menu.el-menu--horizontal {
    border-bottom: none !important;
}

.el-menu-item.is-active {
    border-bottom: 2px solid #e69524;
    color: #e69524;
}


header {
    line-height: 1.5;
}

.logo {
    display: block;
    margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
    header {
        display: flex;
        place-items: center;
        padding-right: calc(var(--section-gap) / 2);
    }

    .logo {
        margin: 0 2rem 0 0;
    }
}
</style>
